<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>照片墙</title>
		<style>

			body {
				background-color: pink;
			}
			
			div {
				width: 960px;
				/*height: 60px;*/
				/* 背景颜色 */
				/*background-color: red;*/
				/* 上外边距 */
				margin-top: 200px;
				/* 左外边距 */
				margin-left: auto;
				/* 右外边距 */
				margin-right: auto;
				/* 相对定位 */
				position: relative;
			}

			.box>img {
				width: 200px;
				position: absolute;
				border: 20px ridge cyan;
				/*
					过渡效果
				*/
				transition: 2s;
			}

			.r {
				right: 0;
			}

			.c {
				left: 380px;
			}

			.f {
				/* 
					转换, 形变 
					degree: 度; 
					rotate 如果值为正值, 那么元素顺时针旋转, 否则逆时针旋转
				*/
				transform: rotate(15deg);
			}

			.s {
				transform: rotate(-5deg);
			}

			.t {
				transform: rotate(-20deg);
			}

			img:hover {
				/* 
					z轴方向的层级
				*/
				z-index: 1;
				/*
					scale: 缩放;
				*/
				transform: scale(1.3);
				/*
					阴影: x方向偏移量 y方向偏移量 模糊度 阴影半径 颜色;

				*/
				/*box-shadow: 10px 10px 20px 10px gray;*/
				box-shadow: 10px 10px 20px gray;
			}

			audio {
				position: absolute;
				bottom: 0;
				right: 0;
			}

		</style>

	</head>
	<body>

		<div class="box">
			<img src="img/girl1.jpg" alt="" class="f">
			<img src="img/girl2.jpg" alt="" class="s">
			<img src="img/girl3.jpg" alt="" class="t">
			<img src="img/girl4.jpg" alt="" class="c f">
			<img src="img/girl5.jpg" alt="" class="c s">
			<img src="img/girl6.jpg" alt="" class="c t">
			<img src="img/girl7.jpg" alt="" class="r f">
			<img src="img/girl8.jpg" alt="" class="r s">
			<img src="img/girl9.jpg" alt="" class="r t">
		</div>

		<!-- 
			controls: 让音频显示控制按键
			loop: 循环
			autoplay: 自动播放
		 -->
		<audio src="aqzy.mp3" controls loop autoplay></audio>
		
	</body>
</html>